<template>
  <Divider style="margin: 5px 0px">高级查询条件</Divider>
  <div class="advance-search-wrap">
    <Row v-for="(row, key) in renderConfig.rows" :key="key">
      <Col v-for="(col, _key) in row.cols" :key="_key" :span="row.colWidth">
        <Form-item :label="col.comments">
          {{ props.searchForm[col.name] }}
          <FormField v-model="props.searchForm[col.name]" :type="col.showType" :col="col" />
        </Form-item>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
import { findSearchFormConfig } from '@/api/common'
import { onBeforeMount, reactive } from 'vue'
import FormField from './FormField.vue'
const props = defineProps({
  viewNo: String,
  localQueryConfig: {
    type: Object,
    default: () => ({})
  },
  isLocalQueryConfig: {
    type: Boolean,
    default: false
  },
  searchForm: {
    type: Object,
    required: true
  }
})

interface IrenderConfig {
  colnum: string
  rows: Array<any>
}
const renderConfig: IrenderConfig = reactive({
  colnum: '3',
  rows: []
})
// 获取服务器上的查询条件配置
const getSearchFormRemoteConfig = () => {
  findSearchFormConfig(props.viewNo as string).then((res) => {
    const { isSuccess, errorMsg, errmsg, data } = res || {}
    if (isSuccess) {
      if (data && data.columns.length > 0) {
        const columns = [
          {
            id: '571bc39d033d4954a79b0f6c43e68e98',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            name: 'regorgname',
            dbName: 'REGORGNAME',
            comments: '注册登记机构',
            showType: 'input',
            sort: '10',
            queryType: 'like',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          },
          {
            id: 'b09c1b28f696446bbc71e151acced538',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            name: 'regdate',
            dbName: 'REGDATE',
            comments: '注册登记日期',
            showType: 'dateselect',
            sort: '20',
            queryType: 'between',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          },
          {
            id: 'ea734f1a7e924809abac49db44f7453d',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            name: 'equipname',
            dbName: 'EQUIPNAME',
            comments: '设备名称',
            showType: 'input',
            sort: '30',
            queryType: 'like',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          },
          {
            id: 'b40a236f9bfd4566b1d858dfe07b5771',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            dictParentId: '-1',
            dictParentValue: '10001002',
            dictType: 'C637',
            name: 'stacheorgnam',
            dbName: 'STACHEORGNAM',
            comments: '检验部门',
            showType: 'checkbox',
            sort: '40',
            queryType: 'like',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          },
          {
            comments: '加热方式',
            dbName: 'HEATUPMODE',
            dictParentId: '-1',
            dictParentValue: '10001002',
            dictType: 'C637',
            id: '4e827deb0d1648cc8348e3e674754ae4',
            isChecked: true,
            isDefault: '1',
            isLine: '0',
            isNull: '1',
            isOtherQuery: '1',
            isReadonly: '0',
            moduleId: '962e57600cd148b19f6a3acfbb4e6f6a',
            name: 'heatupmode',
            queryType: '=',
            showType: 'radiobox',
            sort: '90'
          },
          {
            id: '7c520168a0b3442b81573cccc8e7a100',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            name: 'equipmodel',
            dbName: 'EQUIPMODEL',
            comments: '设备型号',
            showType: 'hidden',
            sort: '60',
            queryType: 'like',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          },
          {
            id: '921e9b9940cb4c75ba1a546ff19549a2',
            moduleId: '2f16412542374670a9961d5fd7d57e3d',
            name: 'ninspdate',
            dbName: 'NINSPDATE',
            comments: '下次内检日期',
            showType: 'daterange',
            sort: '70',
            queryType: 'between',
            isNull: '1',
            isReadonly: '0',
            isLine: '0',
            isOtherQuery: '0',
            isDefault: '1',
            isChecked: true
          }
        ]
        fieldRender(data.formcol, columns)
      }
    } else {
      window.$Message.error(errorMsg || errmsg)
    }
  })
}
// 获取本地的查询条件配置
const getSearchFormLocalConfig = () => {}
const getSearchFormConfig = () => {
  if (props.isLocalQueryConfig) {
    getSearchFormLocalConfig()
  } else {
    getSearchFormRemoteConfig()
  }
}
const fieldRender = (colnum: string, columns: Array<any>) => {
  console.log(colnum, columns)
  renderConfig.colnum = colnum

  const curColumns = columns.filter((col) => col.showType !== 'hidden')

  let colWidth = 24 / +renderConfig.colnum //列宽
  let row: any = {}
  let idx = 0
  let isFillLastCol = curColumns.length % +renderConfig.colnum != 0
  const showLen = curColumns.filter((item) => item.showType !== 'hidden').length // 配置的类型不为隐藏域的个数
  for (let i = 0; i < curColumns.length; i++) {
    let col = curColumns[i]

    //判断是否单独一行
    if (col.isLine == '1') {
      //row行不空，需要补上一行的列
      if (row) {
        //列差值
        let diffLength = +renderConfig.colnum - row.cols.length
        //补上一行的列
        for (let i = 0; i < diffLength; i++) {
          let tempCol = {
            isEmptyFlag: true,
            colWidth: colWidth
          }
          row.cols.push(tempCol)
        }
        renderConfig.rows.push(row)
      }

      //独占一行时，需要新增行
      if (col.isLine == '1' || row == undefined) {
        col.colWidth = 24
        row = {
          colWidth,
          cols: [col]
        }
        renderConfig.rows.push(row)
      }
      row = undefined
      idx = 0
    } else if (curColumns.length - 1 == i && isFillLastCol) {
      //row行不空，需要补上一行的列
      if (row) {
        //列差值
        let diffLength = +renderConfig.colnum - row.cols.length

        //最后1列 ，行未占满
        if (diffLength > 0) {
          col.colWidth = colWidth
          row.cols.push(col)
          --diffLength
        }

        //补上一行的列
        for (let i = 0; i < diffLength; i++) {
          let tempCol = {
            isEmptyFlag: true,
            colWidth: colWidth
          }
          row.cols.push(tempCol)
        }
        renderConfig.rows.push(row)
      } else {
        //行为空（最后一行，最后一列为第一列）时，需要新增行
        col.colWidth = colWidth
        row = {
          colWidth: colWidth,
          cols: [col]
        }

        renderConfig.rows.push(row)
      }
      row = undefined
      idx = 0
    } else {
      //不是独占一行的列
      //创建行
      if (idx % +renderConfig.colnum == 0) {
        row = {
          colWidth: colWidth,
          cols: []
        }
        idx = 0
      }
      col.colWidth = colWidth
      row.cols.push(col)
      if (
        (idx + 1) % +renderConfig.colnum == 0 ||
        (showLen === idx + 1 && showLen < +renderConfig.colnum) // 当需要展示的项小于配置的列数且与最后一列下标加1相等时，也可成行
      ) {
        renderConfig.rows.push(row)
        row = undefined
      }
      idx++
    }
  }
  console.log(renderConfig)
}

onBeforeMount(() => {
  getSearchFormConfig()
})
</script>

<style scoped></style>
